<template>
	<el-dialog title="企业审核" v-model="isShowDialog" width="450px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form :model="ruleForm"  label-width="120px" ref="EnterpriseForm" size="default">
			<el-row :gutter="35">
				<el-input v-model="ruleForm.ID" type="hidden"></el-input>
				<el-input v-model="ruleForm.EnterpriseID" type="hidden"></el-input>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="账号"
						:rules="[{ required: true, message: '请输入账号名'},{validator: validateAccount, trigger: 'blur'} ]"
						prop="AccountName">
						<el-input v-model="ruleForm.AccountName" placeholder="请输入账号名" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="密 码" required :rules="[{ required: true, message: '请输入密码'} ]" prop="Password">
						<el-input v-model="ruleForm.Password" placeholder="请输入密码" type="password" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="手机号">
						<el-input v-model="ruleForm.MobileTelephone" placeholder="请输入手机号" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="邮箱">
						<el-input v-model="ruleForm.Email" placeholder="请输入邮箱" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="QQ">
						<el-input v-model="ruleForm.QQ" placeholder="请输入QQ" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="微信">
						<el-input v-model="ruleForm.Wechat" placeholder="请输入微信" clearable
							v-on:keyup.enter="submitForm(EnterpriseForm)"></el-input>
					</el-form-item>
				</el-col>
		
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" style="margin-right:10px;">关 闭</el-button>
			</span>
			<span class="dialog-footer">
				<el-button @click="submitForm(EnterpriseForm)">提 交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		ref,
		toRefs,
		reactive
	} from 'vue'

	import {
		ElForm,
		ElMessage
	} from 'element-plus';

	import {
		usePageApis
	} from '/@/api/EnterpriseMange/index';
	
	export default {
		name: 'AuditDialog',
		setup() {
			const APIList = usePageApis();
			const vFormRef = ref(null);
			type FormInstance = InstanceType < typeof ElForm > ;
			const EnterpriseForm = ref < FormInstance > ();
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					ID: '0',
					EnterpriseID: '',
					AccountName: '',
					MobileTelephone: '',
					Email: '',
					QQ: '',
					Wechat: '',
				},
			});
			
			// 提交
			const submitForm = (formEl: FormInstance | undefined) => {
				if (!formEl) return;
				formEl.validate((valid) => {
					if (valid) {
						//let api = state.ruleForm.ID !== '0' ? setInfoAPI : createAPI;
						let api = APIList.createAPI;
						api(state.ruleForm).then(async (response) => {
							if (response['code'] === 0) {
								if (state.callback) {
									state.callback();
								}
								ElMessage.success(`${response.message}`);
								closeDialog();
							}
						});
						console.log(state.ruleForm)
					} else {
						return false
					}
				})
			};
			
			
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.isShowDialog = true;
				state.ruleForm.EnterpriseID = model.ID;
				state.callback = callback;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			
			// 检查账号是否存在
			const validateAccount = (rule: any, value: any, callback: any) => {
				let prams = {
					AccountName: value,
					ID: state.ruleForm.ID
				}
				APIList.existAPI(prams).then(async (response) => {
					if (response.result === true) {
						callback(new Error(`${value} 已经被占用，请重新输入`))
					} else {
						callback()
					}
				});
			}

			return {
				openDialog,
				closeDialog,
				submitForm,
				vFormRef,
				EnterpriseForm,
				validateAccount,
				...toRefs(state),
			};
		}
	}
</script>
